<template>
	<view class="goods-main">
		<z-paging style="height: 100% !important;" class="wrap" ref="paging" v-model="goodsList" @query="queryList">
			<cu-custom slot="top" bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">点位列表</block>
			</cu-custom>
			<view slot="top" class="search">
				<u-search placeholder="请输入点位名" v-model="getData.KeyWord" @custom='search()' @search='search()'></u-search>
			</view>
			<view style="width: 100%;height: 80rpx;background-color: white;margin-top: 10rpx;" class="classify">
				<text style="margin-right: 100rpx;" @click="getQrcodeTree()">
				    {{(chooseNames!=null&&chooseNames!='')?chooseNames:'请选择分类'}}
					<text class="bxImg cuIcon-unfold" style="margin-right: 10rpx;height: 18rpx;width: 18rpx;"></text>
				</text>
				<text @click="getQrcodeAreaTree()">
				    {{(chooseAreaNames!=null&&chooseAreaNames!='')?chooseAreaNames:'请选择位置'}}
					<text class="bxImg cuIcon-unfold" style="margin-right: 10rpx;height: 18rpx;width: 18rpx;"></text>
				</text>
				<text @click="removeFiltes()" class="removeFiltes">清空</text>
			</view>
			<!-- 商品列表开始 -->
			<view v-for="(item, index) in goodsList" class="goods-item-wrap" @click="choiseQrcode(item.Id,item.qrcode_title)">
				<image :src='baseImage+item.ETImages' class="goods-image"/>
				<view class="goods-content-wrap">
					<view class="goods-name">
						<view :class="item.QrcodeStatus==1?'stateColor1':item.QrcodeStatus==2?'stateColor2':'stateColor3'"></view>
						{{ item.ETName }}
					</view>
					<view class="goods-stock-wrap">
						<view class="goods-stock">分类：{{ item.DepartmentName }}</view>
						<view class="goods-sell-count">位置：{{ item.QrcodeAreaName }}</view>
					</view>
					<view class="goods-price">{{ item.qrcode_des }}</view>
					

					<view class="goods-option" @click.stop="">
						<view v-if="item.QrcodeStatus==1" class="goods-option-item changeColor1">正常</view>
						<view v-if="item.QrcodeStatus==2" class="goods-option-item changeColor2">维修中</view>
						<view v-if="item.QrcodeStatus==3" class="goods-option-item changeColor3">故障</view>
					</view>
				</view>
			</view>
		</z-paging>
		<ba-tree-picker ref="treePicker" :multiple='false' :showAll='true' @select-change="selectAssign" title="分类筛选"
		     :localdata="treeQrcodeList" valueKey="id" textKey="name" childrenKey="children" />
			 
		<ba-tree-picker ref="treePickerArea" :multiple='false' :showAll='true' @select-change="selectAssignArea" title="分类筛选"
			      :localdata="treeQrcodeAreaList" valueKey="id" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				chooseNames:'',
				chooseAreaNames:'',
				treeQrcodeList:[],
				treeQrcodeAreaList:[],
				goodsList: [],
				goodsNav: 0,
				getData:{
					ETArchivesId:'',
					KeyWord:'',
					PageIndex:1,
					PageSize:10,
					Sort: 'AddTime',
					SortType: 'desc',
					qrcodeClass:'',
					qrcodeArea:''
				},
				baseImage:this.$request22.baseUrl1,
				deviceimg:this.$request22.baseUrl1+'/Resource/Sg/device/deviceimg.png',
				themeColor: '#0079FE',
				filterResult: '',
			}
		},
		onLoad() {
			let that=this
		},
		methods: {
			removeFiltes(){
				let that=this
				that.chooseNames=''
				that.chooseAreaNames=''
				that.getData.qrcodeClass=''
				that.getData.qrcodeArea=''
				that.goodsList=[]
				that.queryList(1,10)
			},
			choiseQrcode(id,name){
				let selectQrcodeEntity={
					id:id,
					name:name
				}
				uni.$emit('ChoiseQrcode',selectQrcodeEntity)
				uni.navigateBack({
					delta: 1 //返回层数，2则上上页
				});
			},
			getQrcodeTree(){
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'SpareApi/GetZtreeDepartmentList',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.treeQrcodeList=res.data.data
						this.$refs.treePicker._show();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			getQrcodeAreaTree(){
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'SpareApi/GetQrcodeQreaZtreeList',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.treeQrcodeAreaList=res.data.data
						this.$refs.treePickerArea._show();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			selectAssignArea(ids){
				let that=this
				if(ids.length==0){
					uni.showToast({ title:'请选择点位位置', icon: 'none' });
					this.$refs.treePickerArea._show();
				}else{
					that.chooseAreaNames=''
					for(let i=0;i<ids.length;i++){
						let entity=ids[i]
						that.chooseAreaNames=entity.name+','+that.chooseAreaNames
					}
					that.chooseAreaNames=that.chooseAreaNames.substring(0,that.chooseAreaNames.length-1)
					that.getData.qrcodeArea=ids
					that.goodsList=[]
					that.queryList(1,10)
				}
			},
			selectAssign(ids){
				let that=this
				if(ids.length==0){
					uni.showToast({ title:'请选择点位分类', icon: 'none' });
					this.$refs.treePicker._show();
				}else{
					////console.log('checkIds:'+JSON.stringify(ids))
					that.chooseNames=''
					for(let i=0;i<ids.length;i++){
						let entity=ids[i]
						that.chooseNames=entity.name+','+that.chooseNames
					}
					that.chooseNames=that.chooseNames.substring(0,that.chooseNames.length-1)
					that.getData.qrcodeClass=ids
					that.goodsList=[]
					that.queryList(1,10)
				}
			},
			queryList(pageNo, pageSize) {
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'api/GetChooseQrcodePageList',
					method: 'post'
				};
				that.getData.PageIndex=pageNo;
				that.getData.PageSize=pageSize;
				request.httpTokenRequest(opts,that.getData).then(res => {
					uni.hideLoading()
					if(res.data.code == 1){
						this.$refs.paging.complete(res.data.data);
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			// 搜索框
			search(e){
				let that=this
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.KeyWord=e
				this.queryList(1,10);
			},
			setNav(goodsNav) {
				//console.log('setNav')
				let that=this
				that.goodsNav = goodsNav
				//console.log("tap set nav " + goodsNav);
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.QrcodeStatus=goodsNav
				that.queryList(1,10);
			},
		}
	}
</script>

<style scoped>
	.classify{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.search{
		width: 100%;
		height: 100rpx;
		padding: 20rpx 2% 0 2%;
		background-color: #fff;
		// display: flex;
		// align-items: center;
	}
	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}
	/* 状态色 */
	.stateColor1{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #1ab394;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor2{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #f8ac59;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor3{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #ed5565;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		position: relative;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.goods-stock {
		margin-right: 24rpx;
	}

	.goods-price {
		font-size:28rpx;
		color: #e7612e;
		margin-top: 12rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}
	/* 需要根据状态改变颜色 */
	.goods-option-item-action {
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor1{
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor2{
		background: rgba(248, 172, 89, 0.2);
		color: #f8ac59;
	}
	.changeColor3{
		background: rgba(237, 85, 101, 0.2);
		color: #ed5565;
	}
	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	.goods-header-item-action {
		font-size: 36rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		position: absolute;
		left: 0;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
	}

	.goods-header-item {
		margin-right: 24rpx;
	}
	.removeFiltes{
		position: absolute;
		right: 20rpx;
		font-size: 26rpx;
		color: #F5222D;
		line-height:80rpx;
	}
/* 
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}

	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	} */
</style>
